<template>
  <view>
    <u-sticky h5-nav-height="0">
      <view class="header u-flex u-col-top border-bottom">
        <view class="u-flex-1">
          <view class="version-name" @click="showSelect('key1')">
            <text class="u-m-r-12">{{ versionData1.name }}</text>
            <image class="down-icon" src="../../static/img/down_circle.png" mode=""></image>
          </view>
          <!-- <view class="u-flex u-row-center u-font-24">
            <view class="u-flex">
              <view v-if="versionData1.open === 0" class="u-text-right blue-text">
                <text class="u-p-r-8">免费</text>
              </view>
              <view v-else class="u-text-right u-p-r-12 blue-text border-right">
                <text class="u-p-r-8">首年</text>
                <text>¥{{ versionData1.open }}</text>
              </view>
              <view v-if="versionData1.renew === 0" class="u-text-left">
                <text class="grey-text">不可入单</text>
              </view>
              <view v-else class="u-p-l-12 u-text-left">
                <text class="u-p-r-8 grey-text">续费</text>
                <text>¥{{ versionData1.renew }}/年</text>
              </view>
            </view>
          </view> -->
        </view>
        <view class="u-flex-1">
          <view class="version-name" @click="showSelect(key2)">
            <text class="u-m-r-12">{{ versionData2.name }}</text>
            <image class="down-icon" src="../../static/img/down_circle.png" mode=""></image>
          </view>
          <!-- <view class="u-flex u-row-center u-font-24">
            <view class="u-flex">
              <view v-if="versionData2.open === 0" class="u-text-right blue-text">
                <text class="u-p-r-8">免费</text>
              </view>
              <view v-else class="u-text-right u-p-r-12 blue-text border-right">
                <text class="u-p-r-8">首年</text>
                <text>¥{{ versionData2.open }}</text>
              </view>
              <view v-if="versionData2.renew === 0" class="u-text-left">
                <text class="grey-text">不可入单</text>
              </view>
              <view v-else class="u-p-l-12 u-text-left">
                <text class="u-p-r-8 grey-text">续费</text>
                <text>¥{{ versionData2.renew }}/年</text>
              </view>
            </view>
          </view> -->
        </view>
      </view>
    </u-sticky>

    <u-select v-model="showSelectVersion" :list="selectlist" :safe-area-inset-bottom="true"
              @confirm="confirm"/>

    <view class="u-p-36">
      <uni-collapse :accordion="false" :head-style="{ color: '#262626', fontWeight: 600, paddingBottom: '40rpx' }">
        <view v-if="!versionData1[key].isEmpty || !versionData2[key].isEmpty" v-for="(key,idx) in contentList"
              :key="idx" class=" ">
          <uni-collapse-item :title="versionData1[key].title" :key="idx" :open="true">
            <view class="content black-text u-flex u-col-top">
              <view class="u-flex-1 u-p-r-30">
                <view
                    v-for="(item,index) in versionData1[key].list"
                    :key="index"
                    v-if="item !== '-' || versionData2[key].list[index] !== '-'" class="u-font-24 ">
                  <view style="min-height: 40px">
                    {{ item }}
                  </view>
                </view>
              </view>
              <view class="u-flex-1 u-p-r-30">
                <view
                    v-for="(item,index) in versionData2[key].list"
                    :key="index"
                    v-if="item !== '-' || versionData1[key].list[index] !== '-'" class="u-font-24 ">
                  <view style="min-height: 40px">
                    {{ item }}
                  </view>
                </view>
              </view>
            </view>
          </uni-collapse-item>

        </view>
      </uni-collapse>

      <!-- <view v-for="(key,idx) in contentList">
        <view v-if="!versionData1[key].isEmpty && !versionData2[key].isEmpty">
          <view class="u-font-28 u-m-b-36 font-bold" @click="collapse(idx)">{{ versionData1[key].title }}</view>
          <view ref="content" style="height: 0px;" class="content u-flex u-col-top">
            <view class="u-flex-1">
              <view v-for="(item,index) in versionData1[key].list"
                v-if="item !== '-' || versionData2[key].list[index] !== '-'" class="u-font-24 u-p-b-36">
                {{ item }}
              </view>
            </view>
            <view class="u-flex-1">
              <view v-for="(item,index) in versionData2[key].list"
                v-if="item !== '-' || versionData1[key].list[index] !== '-'" class="u-font-24 u-p-b-36">
                {{ item }}
              </view>
            </view>
          </view>
        </view>
      </view> -->

    </view>
    <view class="u-flex u-row-center u-m-t-16 u-p-b-66" style="width: 100%;">
      <view class="contrast-btn black-text u-flex u-row-center" @click="toIndex">系统全部版本</view>
    </view>

  </view>
</template>

<script>
import {operationData} from '../../static/data/data.js'

export default {
  data() {
    return {
      versionData: {},
      key1: 'member',
      key2: 'startCreation',
      versionData1: {},
      versionData2: {},
      selectedKey: '',
      isCollapse: false,
      showSelectVersion: false,
      operationVersionList: [
        'member',
        'basic',
        'startCreation',
        'haircutStandard',
        'complex',
        'headquarters'
      ],
      initSelectlist: [], // 原始可选择列表
      selectlist: [], // 可选择列表
      contentList: [
        'frontCashier',
        'dailyEntry',
        'backManagement',
        'analysis',
        'electronic',
        'wx'
      ]
    }
  },
  onLoad() {
    this.versionData1 = operationData[this.key1]
    this.versionData2 = operationData[this.key2]
    let selectlist = []
    this.operationVersionList.forEach((item, index) => {
      selectlist.push({
        value: item,
        label: operationData[item].name
      })
    })
    this.initSelectlist = selectlist
    this.selectlist = selectlist
    console.log(operationData)
  },
  methods: {
    showSelect(key) {
      this.selectedKey = key
      this.selectlist = this.initSelectlist.filter(item => {
        return item.value !== this.key1 && item.value !== this.key2
      })
      this.showSelectVersion = true
    },
    confirm(e) {
      if (this.selectedKey === 'key1') {
        this.key1 = e[0].value
        this.versionData1 = operationData[e[0].value]
      } else {
        this.key2 = e[0].value
        this.versionData2 = operationData[e[0].value]
      }
    },
    collapse(index) {
      console.log(this.$refs['content'][index].$el.style.height)
      if (this.$refs['content'][index].$el.style.height === '0px') {
        this.$refs['content'][index].$el.style.height = '80px'
      } else {
        this.$refs['content'][index].$el.style.height = '0px'
      }
      // this.isCollapse = !this.isCollapse
      console.log(this.$refs.content.$el)
    },
    toIndex() {
      this.$u.route('/pages/index/index')
    }
  }
}
</script>

<style lang="scss" scoped>
.header {
  height: 120rpx;
  box-sizing: border-box;
  background-color: #FFFFFF;
}

.version-name {
  width: 100%;
  padding-top: 30rpx;
  font-size: 36rpx;
  font-weight: 600;
  text-align: center;
  padding-bottom: 12rpx;
}

.down-icon {
  width: 26rpx;
  height: 26rpx;
  padding-top: 4rpx;
}

.content {
  height: auto;
  overflow: hidden;
  transition: 0.5s all;
}

.font-bold {
  font-weight: bold;
}

.contrast-btn {
  width: 324rpx;
  height: 90rpx;
  font-size: 30rpx;
  border-radius: 6rpx;
  border: solid 1px #cecfd0;
}
</style>
